<template>
  <div>
      <v-title vtitle="DashBoard"></v-title>
      <el-row :gutter="20" class="process">
            <el-col v-for="(item,index) in percentList" :key="index" :xs="12" :sm="12" :md="12" :lg="6" >
                <el-card class="box-card">
                   <el-row :gutter="6">
                    <el-col :xs="24" :sm="8" :md="8" :lg="8">
                        <el-progress type="circle" :percentage="item.percent" :width="80"></el-progress>
                    </el-col>
                    <el-col :xs="24" :sm="11" :md="12" :lg="12">
                        <div class="cart-string"> 
                        <span>{{item.title}}</span>
                        <span><h2>{{item.total}}</h2></span>
                        </div>
                    </el-col>
                    <el-col :xs="24" :sm="5" :md="4" :lg="4">
                        <div>
                            <i class="icon" :class="[item.iconStyle]"></i>
                        </div>
                    </el-col>
                   </el-row>
                </el-card>
            </el-col>
      </el-row>
      <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="12">
                <el-card class="box-chart">
                    <barChart></barChart>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12">
                <el-card class="box-chart">
                    <pieChart></pieChart>
                </el-card>
            </el-col>
            
      </el-row>
      <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="8">
                <el-card class="box-list">
                  To Do List<hr>
                    <todoList></todoList>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="10">
                <el-card class="box-list">
                  BORDER TABLES
                  <hr>
                    <basicTable></basicTable>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="6">
                <el-card class="box-list">
                  MESSAGE LIST
                  <hr>
                    <messageList></messageList>
                </el-card>
            </el-col>
      </el-row>
  </div>
</template>
<script>
import vTitle from "../common/PageTitle.vue";
import barChart from '../charts/BarChart.vue';
import pieChart from '../charts/PieChart.vue';
import todoList from '../todolist/ToDoList.vue';
import basicTable from '../tables/BasicTable.vue';
import messageList from '../messagelist/MessageList.vue';
export default {
  components: {
    vTitle,barChart,pieChart,todoList,basicTable,messageList
  },
  data() {
    return {
      percentList: [
        {
          percent: 66,
          title: "New Visits",
          total: "57820",
          iconStyle: "el-icon-service"
        },
        {
          percent: 77,
          title: "Purchases",
          total: "$12,334",
          iconStyle: "el-icon-goods"
        },
        {
          percent: 54,
          title: "Active Users",
          total: "157,820",
          iconStyle: "el-icon-star-off"
        },
        {
          percent: 30,
          title: "Returned",
          total: "32,640",
          iconStyle: "el-icon-refresh"
        }
      ]
    };
  }
};
</script>

<style scoped>
.process {
  margin: 20px 0;
}
.el-col {
  margin-bottom: 16px;
  text-align: center;
}
.icon {
  font-size: 80px;
  color: #ddd;
}
.box-card {
  height: 110px;
}
.cart-string {
  height: 100px;
  padding-top: 10px;
  font-size: 1.1rem;
}
.box-chart {
  height: 420px;
}
.box-list {
  height: auto;
  text-align: left;
}
.box-list hr {
  height: 1px;
  border: none;
  border-top: 1px dashed #ccc;
  margin-bottom: 5px;
  margin-top: 6px;
}
</style>

